<template>
  <div>
    <h1>会员列表</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>会员名称</td>
          <td>
            <input type="text" v-model="data.uname" />
          </td>

          <td>年龄</td>
          <td>
            <input type="number" v-model="data.lage" />--<input
              type="number"
              v-model="data.rage"
            />
          </td>

          <td>会员等级</td>
          <td>
            <select v-model="data.dname">
              <option value="">请选择</option>
              <option value="青铜会员">青铜会员</option>
              <option value="白银会员">白银会员</option>
              <option value="黄金会员">黄金会员</option>
              <option value="铂金会员">铂金会员</option>
              <option value="钻石会员">钻石会员</option>
              <option value="至尊会员">至尊会员</option>
            </select>
          </td>
          <td>
            <input type="button" value="查询" @click="list" />
            <input type="button" value="导出" @click="dc" />
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>序号</td>
          <td>名称</td>
          <td>年龄</td>
          <td>照片</td>
          <td>等级</td>
          <td>操作</td>
        </tr>
        <tr v-for="a in info.list">
          <td>{{ a.uid }}</td>
          <td>{{ a.uname }}</td>
          <td>{{ a.uage }}</td>
          <td><img :src="a.uimg" width="60" height="60" /></td>
          <td>{{ a.dname }}</td>
          <td>
            <input type="button" value="禁用" @click="list" />
            <input type="button" value="修改" @click="update" />
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>总条数:{{ info.count }}</td>
          <td>总页数:{{ info.totalpage }}</td>
          <td>当前页:{{ data.pageindex }}</td>
          <td v-for="b in info.totalpage">
            <span>{{ b }}</span>
          </td>
          <td><input type="button" value="首页" @click="page(1)" /></td>
          <td>
            <input
              type="button"
              value="上一页"
              @click="page(data.pageindex - 1)"
            />
          </td>
          <td>
            <input
              type="button"
              value="下一页"
              @click="page(data.pageindex + 1)"
            />
          </td>
          <td>
            <input type="button" value="尾页" @click="page(info.totalpage)" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
onMounted(() => {
  list();
});
const dc = () => {
  location.href = "";
};
const update = () => {
  router.push({
    path: "/update",
    query: info.list.uid,
  });
};
let data: any = reactive({
  uname: "",
  lage: 0,
  rage: 0,
  dname: "",
  pageindex: 1,
  pagesize: 2,
});
let info: any = reactive({
  count: 0,
  list: [],
  totalpage: 0,
});
const page = (e: any) => {
  if (e <= 0) {
    data.pageindex = 1;
  } else if (e >= info.totalpage) {
    data.pageindex = info.totalpage;
  } else {
    data.pageindex = e;
  }

  list();
};

const list = () => {
  axios({
    url: "/api/User/GetList",
    method: "get",
    params: data,
  }).then((res) => {
    console.log(res);
    Object.assign(info, res.data);
  });
};
</script>

<style scoped></style>
